<template>
    <div class="login">
        <div id="particles"></div>
        <div class="login-content">
            <Card>
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    人民调解管理信息系统
                </p>
                <div class="form-con">
                    <i-form ref="model" :model="model" :rules="ruleValidate">
                        <Form-item prop="username">
                            <i-input type="text" v-model="model.username" placeholder="请输入用户名" :autofocus="true">
                                <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                            </i-input>
                        </Form-item>
                        <Form-item prop="password">
                            <i-input type="password" v-model="model.password" placeholder="请输入密码" @on-enter="login">
                                <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                            </i-input>
                        </Form-item>
                        <i-button type="ghost" long @click="login" :loading="isLoading">登录</i-button>
                    </i-form>
                </div>
            </Card>
        </div>
    </div>
</template>
<script>
  import 'particles.js'
  import Util from 'assets/js/libs/util'
  import authApi from 'assets/js/api/auth/auth'
  import userApi from 'assets/js/api/admin/user'

  export default {
    data: function () {
      return {
        isLoading: false,
        checked:false,
        model: {
          username: '',
          password: ''
        },
        ruleValidate: {
          username: [
            {required: true, message: '用户名不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ],
        }
      }
    },
    mounted: function () {
      particlesJS('particles', {
        'particles': {
          'number': {
            'value': 80,
            'density': {
              'enable': true,
              'value_area': 800
            }
          },
          'color': {
            'value': '#ffffff'
          },
          'shape': {
            'type': 'circle',
            'stroke': {
              'width': 0,
              'color': '#000000'
            },
            'polygon': {
              'nb_sides': 5
            },
            'image': {
              'src': 'img/github.svg',
              'width': 100,
              'height': 100
            }
          },
          'opacity': {
            'value': 0.5,
            'random': false,
            'anim': {
              'enable': false,
              'speed': 1,
              'opacity_min': 0.1,
              'sync': false
            }
          },
          'size': {
            'value': 10,
            'random': true,
            'anim': {
              'enable': false,
              'speed': 80,
              'size_min': 0.1,
              'sync': false
            }
          },
          'line_linked': {
            'enable': true,
            'distance': 300,
            'color': '#ffffff',
            'opacity': 0.4,
            'width': 2
          },
          'move': {
            'enable': true,
            'speed': 12,
            'direction': 'none',
            'random': false,
            'straight': false,
            'out_mode': 'out',
            'bounce': false,
            'attract': {
              'enable': false,
              'rotateX': 600,
              'rotateY': 1200
            }
          }
        },
        'interactivity': {
          'detect_on': 'canvas',
          'events': {
            'onhover': {
              'enable': false,
              'mode': 'repulse'
            },
            'onclick': {
              'enable': true,
              'mode': 'push'
            },
            'resize': true
          },
          'modes': {
            'grab': {
              'distance': 800,
              'line_linked': {
                'opacity': 1
              }
            },
            'bubble': {
              'distance': 800,
              'size': 80,
              'duration': 2,
              'opacity': 0.8,
              'speed': 3
            },
            'repulse': {
              'distance': 400,
              'duration': 0.4
            },
            'push': {
              'particles_nb': 4
            },
            'remove': {
              'particles_nb': 2
            }
          }
        },
        'retina_detect': true
      })
    },
//    computed: {
//      authRedirectUrl () {
//        return this.$store.state.authRedirectUrl;
//      }
//    },
    methods: {
      login () {
        let self = this
        self.$refs['model'].validate((valid) => {
          if (valid) {
            self.isLoading = true
            self.loginCheck();
          } else {
          }
        })
      },
      loginCheck () {
        let self = this;
          let afterLoginSuccess = function (response) {
            console.log(response)
              Util.setAuthAccessToken(response.data.data.api_token)
              userApi.fetchUser(user => {
                let authRedirectUrl = Util.getAuthRedirect()
                self.isLoading = false
                Util.login(user)
                self.$router.push({
                  path: authRedirectUrl
                })
              })
          }
          let afterLoginFailed = function (error) {
            self.isLoading = false
          }
          // console.log(res);
            authApi.login({
              username: self.model.username,
              password: self.model.password
            }, afterLoginSuccess, afterLoginFailed)
      }
    }
  }
</script>

<style lang="less">
    #particles {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .login {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        position: relative;
        background-image: url("../../images/logo-bg.png");
    &-content {
         position: absolute;
         right: 160px;
         top: 50%;
         transform: translateY(-60%);
         width: 300px;
    &-header {
         font-size: 16px;
         font-weight: 300;
         text-align: center;
         padding: 30px 0;
     }
    .form-con {
        padding: 10px 0 0;
    }
    .login-tip {
        font-size: 10px;
        text-align: center;
        color: #c3c3c3;
    }
    }
    }
</style>
